<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期级联下拉列</title>
    <script>
        function loadDate(){
            // 加载年份
            let year = document.getElementById("year");
            // 年份的值为当前年份的前三十年
            // 获取当前年份
            let currentYear = new Date().getFullYear();
            for(let i = currentYear - 30; i <= currentYear; i++){
                year[year.length] = new Option(i+"年",i);
            }

            // 加载月份
            let month = document.getElementById("month");
            for(let i = 1; i<= 12; i++){
                month[month.length] = new Option(i+"月",i);
            }
        }

        function loadDay(){
            // 获取当前所选择的年份与月份的值
            let year = document.getElementById("year").value;
            let month = document.getElementById("month").value;

            // 获取天数的节点
            let day = document.getElementById("day");
            // 加载前清空原有数据,但保留原始初始选项
            day.length = 1;

            // 当年份或者月份没有选择有效数据的时候,不做任何处理
            if(year == -1 || month == -1){
                return;
            }

            // 否则,获取当前年月所对应的天数
            let countDay = new Date(year,month,0).getDate();

            // 加载对应的天数
            for(let i = 1; i <= countDay; i++){
                day[day.length] = new Option(i+"日",i);
            }
        }
    </script>
</head>
<body onload="loadDate()">
<!--
    1.当页面加载之后,自动加载年份与月份的值
    要求:
        年份的值为当前年份的前三十年
        月份的值为1-12月
    2.当用户选择了有效的年份与月份之后
        根据所选择的年份与月份自动加载对应的天数
-->
<select id="year" onchange="loadDay()">
    <option value="-1">--年--</option>
</select>
<select id="month" onchange="loadDay()">
    <option value="-1">--月--</option>
</select>
<select id="day">
    <option value="-1">--日--</option>
</select>
</body>
</html>